<template>
  <div class="base-select-app-container">
    <div class="search-wrap mar-b-8">
      <el-select v-model="bizType" :placeholder="$t('common.placeholder.select')" @change="selectApp">
        <el-option
          v-for="app in appList"
          :key="app.bizType"
          :label="app.name"
          :value="app.bizType">
        </el-option>
      </el-select>
      <el-input
        class="mar-l-12"
        :placeholder="$t('common.base.search')"
        v-model="keyword"
        @input="searchModule"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div class="business-list-wrap" v-loading="loading">
      <no-data-view-new v-if="moduleList.length == 0 && !loading"></no-data-view-new>
      <div
        class="business-list-item"
        :class="item.active ? 'active': ''"
        v-for="item in moduleList"
        :key="item.formId"
        @click="selectModule(item)">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import NoDataViewNew from '@src/component/common/NoDataViewNew';
import { getAppList, getModuleList } from '@src/modules/smartPlan/api/index.js'
export default {
  name: 'base-select-app',
  data() {
    return {
      bizType: '',
      appList: [],
      originModuleList: [],
      moduleList: [],
      selectItem: {},
      keyword: '',
      loading: false,
    }
  },
  mounted() {
    this.getApp()
  },
  methods: {
    getApp() {
      getAppList().then(res => {
        this.appList = (res.data || []).map(item => {
          // paas应用的type都为PAAS，需要构造key
          if (item.type == 'PAAS') {
            item.bizType = `${item.type}__${item.paasAppId}`
          } else {
            item.bizType = item.type
          }
          return item
        })
        // 默认获取第一个应用的模块
        if (this.appList.length) {
          this.bizType = this.appList[0].bizType
          this.paasAppId = this.appList[0].paasAppId
          this.getModule()
        }
        if (this.appList.some(item => item.type == 'PAAS')) {
          this.$emit('showPaasTip', true)
        } else {
          this.$emit('showPaasTip', false)
        }
      })
    },
    // 选择应用
    selectApp(bizType) {
      this.paasAppId = this.appList.find(item => item.bizType == bizType)?.paasAppId || ''
      this.$emit('select', {})
      this.getModule()
    },
    // 获取模块
    getModule() {
      this.loading = true
      getModuleList({
        bizType: this.bizType.split('__')[0],
        paasAppId: this.paasAppId
      }).then(res => {
        this.loading = false
        this.originModuleList = this.moduleList = res.data || []
      })
    },
    // 搜索模块
    searchModule() {
      this.moduleList = this.originModuleList.filter(item => item.name.includes(this.keyword)).map(item => {
        item.active = false
        if (item.formId == this.selectItem.formId) {
          item.active = true
        }
        return item
      });  
    },
    // 
    // 选择模块
    selectModule(_item) {
      this.moduleList.forEach((item, index) => {
        item.active = false
        if (item.formId == _item.formId) {
          item.active = true
          this.moduleList.splice(index, 1, item)
        }
      })
      _item.type = this.bizType.split('__')[0]
      this.selectItem = _item
      this.$emit('select', _item)
    }
  },
  components: {
    NoDataViewNew,
  }
}
</script>

<style lang="scss" scoped>
.base-select-app-container {
  .search-wrap {
    display: flex;
  }
  .business-list-wrap {
    .business-list-item {
      display: flex;
      align-items: center;
      padding: 5px 12px;
      height: 40px;
      border-bottom: 1px solid #EBEDF0;
      cursor: pointer;
      @include text-ellipsis();
      &.active {
        color: $color-primary-light-6;
        background: #E6FFFB !important;
        font-weight: bold;
      }
      &:hover {
        background: #F5F8FA;
      }
    }
  }
}
::v-deep .app-nodata-view .app-nodata-img-container {
  padding-top: 0;
}
</style>